---
type: tutorial
title: Добавьте стили для всего сайта
description: |-
  Руководство: Создайте свой первый блог на Astro —
  Создайте глобальную таблицу стилей для стилизации всего сайта
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Теперь, когда у вас есть стилизованная страница «О сайте», пришло время добавить несколько глобальных стилей для остальной части вашего сайта!

<PreCheck>
  - Применить стили глобально
</PreCheck>

## Добавление глобальной таблицы стилей

Вы знаете, что тег `<style>` в Astro имеет **область видимости** по умолчанию, что означает, что он влияет только на элементы в своем собственном файле.

Существуют несколько способов определения **общих** стилей в Astro, но в этом руководстве вы создадите и импортируете файл `global.css` в каждую из ваших страниц. Эта комбинация таблицы стилей и тега `<style>` дает вам возможность управлять определёнными стилями в масштабах всего сайта, а также применять некоторые специфические стили именно там, где вы хотите их видеть.

<Steps>
1. Создайте новый файл по адресу `src/styles/global.css` (сначала вам нужно создать папку `styles`).

2. Скопируйте следующий код в новый файл `global.css`

    ```css title="src/styles/global.css"
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }
    ```

3. В файле `about.astro` добавьте следующий оператор импорта в метаданных:

    ```astro title="src/pages/about.astro" ins={2}
    ---
    import '../styles/global.css';

    const pageTitle = "Обо мне";

    const identity = {
      firstName: "Сара",
      country: "Канада",
      occupation: "Технический писатель",
      hobbies: ["фотография", "наблюдение за птицами", "бейсбол"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Написание документации"];

    const happy = true;
    const finished = false;
    const goal = 3;

    const skillColor = "navy";
    const fontWeight = "bold";
    const textCase = "uppercase";
    ---
    ```

4. Проверьте предварительный просмотр страницы «О сайте» в браузере, и вы должны увидеть новые применённые стили!
</Steps>

<Box icon="puzzle-piece">

## Попробуйте сами - Импортируйте свою глобальную таблицу стилей

Добавьте необходимую строку кода в каждый файл `.astro` в вашем проекте, чтобы применить ваши глобальные стили к каждой странице вашего сайта.

<details>
<summary>✅ Покажите мне код! ✅</summary>

Добавьте следующий оператор импорта к двум другим файлам страниц: `src/pages/index.astro` и `src/pages/blog.astro`.

```astro title="src/pages/index.astro" ins={2}
---
import '../styles/global.css';
---
```
</details>
</Box>

Внесите любые изменения или дополнения в содержимое страницы «О сайте», добавив HTML-элементы в шаблон страницы, статически или динамически. Напишите любой дополнительный JavaScript в блоке метаданных, чтобы получить значения для использования в HTML. Когда вы будете довольны этой страницей, отправьте все внесённые вами изменения на GitHub, прежде чем переходить к следующему уроку.

<Box icon="question-mark">
### Проанализируйте шаблон

Ваша страница «О сайте» теперь оформлена с использованием *обоих стилей*: импортированного файла `global.css` *и* тега `<style>`.

- Применяются ли стили из обоих методов оформления?

    <p>
      <Spoiler>Да</Spoiler>
    </p>

- Есть ли конфликтующие стили, и если да, то какие из них применяются?

    <p>
      <Spoiler>Да, `<h1>` имеет размер `2,5rem` глобально, но `4rem` локально в теге `<style>`. Локальное правило `4rem` применяется на странице «О сайте».</Spoiler>
    </p>

- Опишите, как работают `global.css` и `<style>` вместе.

    <p>
      <Spoiler>Когда конфликтующие стили определены как глобально, так и в локальном теге `<style>` страницы, локальные стили должны перезаписывать любые глобальные стили. (Но могут быть и другие факторы, поэтому всегда визуально проверяйте свой сайт, чтобы убедиться, что стили применены правильно!)</Spoiler>
    </p>

- Как бы вы выбрали, объявлять ли стиль в файле `global.css` или в теге `<style>`?

    <p>
      <Spoiler>Если вы хотите, чтобы стиль применялся ко всему сайту, вы должны использовать файл `global.css`. Однако если вы хотите, чтобы стили применялись только к содержимому HTML в одном файле `.astro` и не затрагивали другие элементы на вашем сайте, вы можете использовать тег `<style>`.</Spoiler>
    </p>

</Box>



<Box icon="check-list">
## Контрольный список

<Checklist>
- [ ] Я умею добавлять глобальные стили CSS, импортировав файл `.css`.
</Checklist>
</Box>

### Ресурсы
- [Сравнение синтаксиса Astro и JSX](/ru/reference/astro-syntax/#differences-between-astro-and-jsx)

- [Тег `<style>` в Astro](/ru/guides/styling/#стилизация-в-astro)

- [CSS переменные в Astro](/ru/guides/styling/#css-переменные)
